<!DOCTYPE HTML>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title id="title">protobatser - quickndirty web prototyping for developers</title>

  <style type="text/css">
    #frame      { border:1px solid #888; margin:35px; padding:50px }
    .curved-big { border-radius:18px;/*CSS3compliantbrowsers*/-moz-border-radius:18px;/*firefox*/-webkit-border-radius:18px;/*GoogleChrome,Safari*/-khtml-border-radius:18px;/*LinuxBrowsers*/*behavior:url("curved.htc");/*IEBrowsers*//*background-image:url("curved.svg");/*Opera9.5+*/}
    .curved     { border-radius:10px;/*CSS3compliantbrowsers*/-moz-border-radius:10px;/*firefox*/-webkit-border-radius:10px;/*GoogleChrome,Safari*/-khtml-border-radius:10px;/*LinuxBrowsers*/*behavior:url("curved.htc");/*IEBrowsers*//*background-image:url("curved.svg");/*Opera9.5+*/}
    .clear      { clear:both }
    ul,li       { margin:0; padding:0 }
    #menu       { margin-bottom:20px }
    #menu ul li { float:left; text-decoration:none; list-style-type:none; margin-right:10px }
  </style>

  <script type="text/javascript" src="protobatser.js"></script>
  <script type="text/javascript">
    function onDomReady(){
      var prototype = { name: "Your site", 
                        menu:     "<ul>{$menu}</ul><div class='clear'></div>",
                        menuItem: "<li><a href='{$href}'>{$title_menu}</a></li>",
                        pages: [ 
                                 { title: "Home",         title_menu: "home",    html: "div#frame.curved-big>div#menu+div#content^text=Lorem ipsum dolor sit amet 0.+div#left+div#right"},
                                 { title: "Lorem ipsum1", title_menu: "ipsum 1", html: "div#frame.curved-big>div#menu+div#content^text=Lorem ipsum dolor sit amet 1.+div#left+div#right"},
                                 { title: "Lorem ipsum2", title_menu: "ipsum 2", html: "div#frame.curved-big>div#menu+div#content^text=Lorem ipsum dolor sit amet 2.+div#left+div#right"},
                                 { title: "Dynamic",      title_menu: "dynamic", html: "div#frame.curved-big>div#menu+div#content^text=Lorem ipsum dolor sit amet 3. {$foo}"},
                               ],
                        menuChange: function( title_menu ){
                          switch( title_menu ){
                            case "dynamic":   _assign("foo", "you can also alter stuff later like this!");
                                              $('content').innerHTML = _fetch( $('content').innerHTML );
                                              zencode( "div^text=or like this>div", $('content') );
                                              break;
                          }
                        }
                      };
      if( protobatser.init( prototype ) ) protobatser.render();
    }
  </script>
</head>
<body>
</body>
</html>
